<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>我的考勤</title>
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>

    <link rel="stylesheet" href="../js/libs/sui/sm.min.css">
    <link rel="stylesheet" href="../js/libs/sui/sm-extend.min.css">
    <link rel="stylesheet" href="../iconfont/iconfont.css">
    <link rel="stylesheet" href="../less/main.css"/>

    <script type='text/javascript' src='../js/libs/jquery-3.1.0.min.js' charset='utf-8'></script>
    <script type="text/javascript">
        var Zepto = jQuery;
    </script>
    <script type='text/javascript' src='../js/libs/sui/sm.min.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/my-calendar.js' charset='utf-8'></script>
    <script type='text/javascript' src='../js/libs/sui/sm-extend.min.js' charset='utf-8'></script>
    <script src="../js/libs/juicer-min.js"></script>
    <script src="../js/libs/jquery.md5.js"></script>
    <script src="../js/api.js"></script>
    <script src="../js/utils.js"></script>
    <script src="../js/common.js"></script>
</head>
<body class="my-kaoqin">
<div class="page">
    <div class="content native-scroll p-t22">
        <!--我的考勤-->
        <div class="my-kaoqin-con">
            <!--头部-->
            <div class="head-no-toolbar bg-self-green">
                <span class="icon iconfont c-white p-l" onclick="javascript:api.closeWin();">&#xe61f;</span>
                <span class="c-white t-center">我的考勤</span>
                <span></span>
            </div>
            <!--内容-->
            <div class="check-head bg-white">
                <div id="ct-image-name" class="item-left">
                    <img id="head-img" src="../images/appportrait2.png" alt=""/>
                    <p id="mytest2"></p>
                </div>
                <div id="ct-classname"  class="item-right open-choose-pup">
                    <!--Andriod黑马培训班-->
                </div>
            </div>

            <div class="kaoqin-con">
                  <div class="table-wrap bg-white m-t">
                    <div class="m-b t-table-title clearfix">
                        <div id="date-title" class="title-left">考勤统计</div>
                        <div class="title-right" style="visibility: hidden;">
                            <input type="text" id="selectMonth" placeholder="选择月份"/>
                        </div>
                    </div>
                    <table>
                        <tr>
                            <td id="kq-state" class="tip-line-bg"><span>上课情况</span></td>
                            <td class="t-right p-r"><span id="state-text">无</span></td>
                            <td id="kq-late" class="p-l tip-line-bg"><span>迟到</span></td>
                            <td class="t-right"><span id="late-text">无</span></td>
                        </tr>
                        <tr>
                            <td id="kq-leave" class="tip-line-bg"><span>旷课</span></td>
                            <td class="t-right p-r"><span id="leave-text">无</span></td>
                            <td class="p-l"></td>
                            <td class="t-right"><span></span></td>
                        </tr>

                    </table>
                  </div>
            </div>
        </div>
        <div class="c-black first-item"></div>
        <!--模态弹出选择框 放在最外面-->
       <!-- <div class="choose-pup">
            <div class="choose-con">
                <div class="choose-item first-item"></div>
           &lt;!&ndash;     <div class="choose-item">Angular开发实战班</div>
                <div class="choose-item">移动开发实战班</div>&ndash;&gt;
            </div>
            &lt;!&ndash;<div class="choose-btn">确定</div>&ndash;&gt;
        </div>-->

    </div>
</div>

<script>
    apiready = function () {
        juicer.set({
            'tag::operationOpen': '{@',
            'tag::operationClose': '}',
            'tag::interpolateOpen': '&{',
            'tag::interpolateClose': '}',
            'tag::noneencodeOpen': '$${',
            'tag::noneencodeClose': '}',
            'tag::commentOpen': '{#',
            'tag::commentClose': '}',
            'strip': false,
            'cache': false
        });

        var canMove=true;


        $(document).ready(function(){
            $("#chooseDate").val(getCurrTime().substring(0,10));
            var setBackCalendar = function (fun) {
                var date="";
                var currentMonth=$(".current-month-value").text();
                var currentYear=$(".current-year-value").text();
                var arr = ["一","二","三","四","五","六","七","八","九","十","十一","十二"];
                //截掉后面的月
                currentMonth=currentMonth.substring(0,currentMonth.length-1);
                //将中文数字转换为阿拉伯数字
                currentMonth=parseInt(arr.indexOf(""+currentMonth+""))+1;
                //格式化date yyyy-mm
                if(currentMonth<10) currentMonth="0"+currentMonth;
                date=currentYear+"-"+currentMonth;

                //根据上课的状态 设置号数的颜色
                var setColor=function(normalDay,abnormalDay){
                    $(".picker-calendar-month-current .picker-calendar-day")
                            .not(".picker-calendar-day-next,.picker-calendar-day-prev")
                            .each(function(index,e){
                                if(normalDay.indexOf(index+1)>=0){
                                    $(e).find("span").css({
                                        "background":"#94f193",
                                        "color":"#fff"
                                    });
                                }
                                if(abnormalDay.indexOf(index+1)>=0){
                                    $(e).find("span").css({
                                        "background":"#f19393",
                                        "color":"#fff"
                                    });
                                }
                            });
                }
                //回调
                if(fun(date,setColor)){
                    fun(date,setColor);
                }
            };

            $("#selectMonth").mycalendar({
                dateFormat:'yyyy-mm-dd',
                //设置最大可选日期为当前日期
                maxDate:getCurrTime().substring(0,10),
                closeOnSelect:false,
                closeOnClickOut:false,
//                touchMove:false,
                toolbarTemplate:'<div class="toolbar">' +
                '<div class="toolbar-inner">' +
                '{{monthPicker}}' +
                '{{yearPicker}}' +
                '</div>' +
                '<div id="colorIntro">' +
                '<div>上课状态：</div>'+
                '<div>（<span></span>正常）</div>'+
                '<div>（<span></span>不正常）</div>'+
                '<div>（无色 无课）</div>'+
                '</div>'+
                '</div>',
                onChange:function(){
                    return canMove;
                },
                onMonthYearChangeEnd: function(){
                    setBackCalendar(function (date, setColor) {

                        getMonthKaoQinData(date, setColor);
                    });

                }

            }).click();
            $.init();
            setBackCalendar(function(date,setColor){

//                getMonthKaoQinData(date,setColor);
            });
        });

        //点击具体天 更新当天数据
        $(".my-kaoqin").on("click",".picker-calendar-month-current .picker-calendar-day:not('.picker-calendar-day-next,.picker-calendar-day-prev')",function(){
            var dayDate=$(this).attr("data-date").split("-");
            dayDate[1]=parseInt(dayDate[1])+1;
            if(parseInt(dayDate[1])<10) dayDate[1]="0"+dayDate[1];
            if(parseInt(dayDate[2])<10) dayDate[2]="0"+dayDate[2];
            dayDate=dayDate.join("-");

            getDayKaoQinData(dayDate);

        });

        var stuInfo=getLoginStudentInfo();
        var stuId=stuInfo.STUDENT_ID;

        //查询某月考勤sql
        var msql = "SELECT T2.BEGIN_TIME,T2.END_TIME,T2.TIME_NAME,DATE_FORMAT(T1.CLASS_DATE,'%Y-%m-%d') CLASS_DATE,T1.SCHEDULE_ID,IFNULL(T3.RESULT_FLAG, '旷课') AS RESULT_FLAG,T1.CLASS_ID,T4.CLASS_NAME,T5.PHOTO_PATH" +
                " FROM (SELECT A.TIME_ID,D.STUDENT_ID,A.CLASS_DATE,A.SCHEDULE_ID,A.CLASS_ID,E.STAFF_ID FROM B_SCHEDULE A,S_STUDENT_CLASS D,s_student E WHERE A.CLASS_ID = D.CLASS_ID AND D.STUDENT_ID = '{0}' AND DATE_FORMAT(A.CLASS_DATE, '%Y-%m') LIKE '{1}' AND D.STUDENT_ID = E.STUDENT_ID) T1" +
                " LEFT JOIN E_TIME_INTERVAL T2 ON T1.TIME_ID = T2.TIME_ID LEFT JOIN S_ATTENDANCE T3 ON T1.SCHEDULE_ID = T3.SCHEDULE_ID" +
                " LEFT JOIN b_class T4 ON T1.CLASS_ID = T4.CLASS_ID LEFT JOIN su_staff T5 ON T1.STAFF_ID = T5.STAFF_ID";


        //查询日考勤数据sql
        var dsql="SELECT T2.BEGIN_TIME,T2.END_TIME,T2.TIME_NAME,DATE_FORMAT(T1.CLASS_DATE,'%Y-%m-%d') CLASS_DATE,T1.SCHEDULE_ID,IFNULL(T3.RESULT_FLAG, '旷课') AS RESULT_FLAG,T1.CLASS_ID,T4.CLASS_NAME,T5.PHOTO_PATH"+
                " FROM (SELECT A.TIME_ID,D.STUDENT_ID,A.CLASS_DATE,A.SCHEDULE_ID,A.CLASS_ID,E.STAFF_ID FROM B_SCHEDULE A,S_STUDENT_CLASS D,s_student E WHERE A.CLASS_ID = D.CLASS_ID AND D.STUDENT_ID = '{0}' AND DATE_FORMAT(A.CLASS_DATE, '%Y-%m-%d') = '{1}' AND D.STUDENT_ID = E.STUDENT_ID) T1"+
                " LEFT JOIN E_TIME_INTERVAL T2 ON T1.TIME_ID = T2.TIME_ID LEFT JOIN S_ATTENDANCE T3 ON T1.SCHEDULE_ID = T3.SCHEDULE_ID"+
                " LEFT JOIN b_class T4 ON T1.CLASS_ID = T4.CLASS_ID LEFT JOIN su_staff T5 ON T1.STAFF_ID = T5.STAFF_ID";


        if(isEmpty(getLoginUserInfo().PHOTO_PATH)){
            $("#head-img").attr("src","../images/appportrait2.png");
        }else{
            $("#head-img").attr("src",getUrl()+"upload/"+getLoginUserInfo().PHOTO_PATH);
        }

        $("#mytest2").text(getLoginStudentInfo().STUDENT_NAME);
        //当前日期yyyy-MM-dd
        var curDate=getCurrTime().substring(0,10);
        $("#date-title").text(changeDate(curDate)+"考勤统计");
        //显示今天数据
        getDayKaoQinData(curDate);

        //查询月考勤数据
        function getMonthKaoQinData(date, setColor) {
            canMove=false;
            dbQuery(1, 10, msql.format(stuId, date), true, function (ret, err) {

               canMove=true;
                if (isObject(ret) && ret.statusCode == 0) {

                    if (ret.result.length > 0) {

                        var tempDate="";
                        //正常的上课 的号数
                        var normalDay = [];
                        //不正常上课 的号数
                        var abnormalDay = [];

                        for (var i = 0; i < ret.result.length; i++) {
                            var kq = ret.result[i];
                            var d = kq.CLASS_DATE;
                            //保证一天一节课且是第一条数据
                            if(d==tempDate){
                                continue;
                            }
                            if (kq.RESULT_FLAG == "正常") {
                                normalDay.push(parseInt(d.substring(8, 10)));
                            } else {
                                abnormalDay.push(parseInt(d.substring(8, 10)));
                            }
                            tempDate=kq.CLASS_DATE;
                        }
                        //设置背景
                        setColor(normalDay, abnormalDay);

                    } else {
                        toast("暂无当月考勤数据");
                    }
                }
            });

        }

        //查询日考勤数据
        function getDayKaoQinData(date){

            dbQuery(1, 10, dsql.format(stuId, date), true, function (ret, err) {

                if (isObject(ret) && ret.statusCode == 0) {

                    $("#date-title").text(changeDate(date) + "考勤统计");
                    //重置状态
                    originState();
                    if (ret.result.length > 0) {
                        var kq = ret.result[0];

                        if (kq.RESULT_FLAG == "正常") {
                            $("#state-text").text("正常");

                        } else if (kq.RESULT_FLAG == "迟到") {

                            $("#state-text").text("不正常");
                            $("#late-text").text("1节");
                            $("#kq-state").removeClass("tip-line-bg");
                            $("#kq-late").removeClass("tip-line-bg");


                        } else if (kq.RESULT_FLAG == "旷课") {
                            $("#state-text").text("不正常");
                            $("#leave-text").text("1节");
                            $("#kq-state").removeClass("tip-line-bg");
                            $("#kq-leave").removeClass("tip-line-bg");
                        }

                    } else {
                        toast("暂无当天考勤数据");
                    }
                }

            });

        };
        //日期转换 yyyy-MM-dd --> yyyy年MM月dd日
        function changeDate(date){
            var dates=date.split("-");
            return dates[0]+"年"+parseInt(dates[1])+"月"+parseInt(dates[2])+"日";
        }
        //回复原始UI
        function originState(){
            $("#state-text").text("无");
            $("#late-text").text("无");
            $("#leave-text").text("无");
            $("#kq-state").addClass("tip-line-bg");
            $("#kq-late").addClass("tip-line-bg");
            $("#kq-leave").addClass("tip-line-bg");
        }

    };
</script>
</body>
</html>

